<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <div class="head-div">
          <img src="../../assets/zjt2.png" alt="" class="back" @click="back()" />
        </div>
        <div class="head-search">职位管理</div>
        <div @click="go('/newJob')">添加</div>
      </div>
    </div>
    <div class="content">
      <div class="block" v-for="item in list">
        <div class="block-top">
          <span>{{ item.job }}</span>
          <span style="position: relative; z-index: 50">当前排名：未上榜</span>
        </div>
        <div class="block-button">
          <div class="blue" v-show="item.type == 0" @click="stopOn()">
            停用
          </div>
          <div class="blue" v-show="item.type == 1" @click="startOn()">启用</div>
          <div class="blue" v-show="item.type != 0 && item.type != 3">修改</div>
          <div class="green" @click="goPrice()">竞价</div>
          <div class="green" v-show="item.type == 3">待审核</div>
          <div class="gray" @click="delOn()">删除</div>
        </div>
      </div>
    </div>
    <mt-popup v-model="popupVisible" position="center">
      <p>竞价排名</p>
      <div class="pop-text">这个职位的当前排名为:未上榜</div>
      <input type="text" :placeholder="title" />
      <div class="pop-btn">
        <span @click="off()">取消</span>
        <span @click="on()">确认</span>
      </div>
    </mt-popup>
  </div>
</template>

<script>
import { Popup,MessageBox,Toast } from "mint-ui";
export default {
  inject: ["reload"],
  name: "job",
  components: { Popup,MessageBox,Toast },
  created() {
    // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
  },
  mounted() {
    // mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
  },
  // data() 为变量赋值等
  data() {
    return {
      // status为用户身份，0是求职者，1是招聘者
      status: localStorage.status,
      list: [
        {
          job: "web前端开发",
          type: 0,
        },
        {
          job: "web前端开发",
          type: 1,
        },
        {
          job: "web前端开发",
          type: 3,
        },
      ],
      popupVisible: false,
      title: "输入您的竞价(您最多竞价16分)",
    };
  },
  // methods 编写js函数
  methods: {
    back() {
      this.$router.go(-1); //返回上一层
    },
    go(r) {
      this.$router.push(r);
    },
    off() {
      this.popupVisible = false;
    },
    on() {
      this.popupVisible = false;
    },
    goPrice() {
      this.popupVisible = true;
    },
    stopOn() {
      MessageBox.confirm("确定要停用该职位吗?")
        .then((action) => {})
        .catch((err) => {
          console.log(err);
        });
    },
    startOn() {
      MessageBox.confirm("确定要启用该职位吗?")
        .then((action) => {})
        .catch((err) => {
          console.log(err);
        });
    },
    delOn() {
      MessageBox.confirm("确定要删除该职位吗?")
        .then((action) => {})
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: rgb(248, 248, 248);
}
.head-fixed {
  width: 100%;
  height: 43px;
  position: fixed;
  z-index: 999;
}
.head {
  background: #3e63a8;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.back {
  width: 14px;
  height: 14px;
}
.head div img {
  width: 20px;
  height: 20px;
}
.head-search {
  box-sizing: border-box;
  flex: 1;
  text-align: center;
  font-size: 14px;
}
.content {
  position: relative;
  top: 43px;
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
}
.block {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 20px 10px 10px;
  background: #fff;
  margin-bottom: 10px;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  border-radius: 10px;
  box-shadow: 2px 2px 5px #c7c7c7;
  position: relative;
}
.block .block-top {
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.block-top span:first-child {
  color: #333;
  font-weight: 700;
}
.block-top span:last-child {
  color: #3e63a8;
}
.block-calss {
  width: 100%;
}
.block-class span {
  color: #757575;
  font-size: 10px;
  padding: 2px 0px;
  border-radius: 3px;
  margin-right: 10px;
}

.block-button {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.block-button div {
  color: #fff;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 5px;
  margin-right: 5px;
}
.blue {
  background: #3e63a8;
}
.green {
  background: #53ca67;
}
.gray {
  background: #c7c7c7;
}
.mint-popup {
  border-radius: 20px;
  width: 80%;
  height: 25%;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
}
.mint-popup p {
  width: 100%;
  box-sizing: border-box;
  padding-top: 10px;
  text-align: center;
}
.pop-text {
  width: 100%;
  text-align: center;
  font-size: 14px;
}
.mint-popup input {
  width: 70%;
  height: 30px;
  outline: none;
}
.pop-btn {
  width: 100%;
  display: flex;
  border-top: 1px solid #ccc;
  box-sizing: border-box;
}
.pop-btn span {
  width: 50%;
  text-align: center;
  box-sizing: border-box;
  color: #3e63a8;
  padding: 10px 0;
}
.pop-btn span:first-child {
  border-right: 1px solid #ccc;
}
</style>
